<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>按天统计 - LayUI模块化应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部组件 -->
        <div id="header-container"></div>
        
        <!-- 侧边栏组件 -->
        <div id="sidebar-container"></div>
        
        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>按天统计</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">查询条件</div>
                            <div class="layui-card-body">
                                <form class="layui-form" lay-filter="dayForm">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">日期范围</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <input type="text" name="startDate" id="startDate" placeholder="开始日期" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <input type="text" name="endDate" id="endDate" placeholder="结束日期" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">统计维度</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <select name="dimension" lay-filter="dimension">
                                                    <option value="all">全部</option>
                                                    <option value="upload">上传流量</option>
                                                    <option value="download">下载流量</option>
                                                    <option value="connections">连接数</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn" lay-submit lay-filter="queryDay">查询</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">按天统计图表</div>
                            <div class="layui-card-body">
                                <div id="dayChart" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">按天统计数据</div>
                            <div class="layui-card-body">
                                <table id="dayTable" lay-filter="dayTable"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部组件 -->
        <div id="footer-container"></div>
    </div>

    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        // 页面特定的JS代码
        layui.use(['form', 'table', 'laydate', 'element'], function() {
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var element = layui.element;
            
            // 页面加载完成后执行
            $(document).ready(function() {
                // 加载组件
                loadComponents();
                
                // 初始化日期选择器
                initDatePickers();
                
                // 初始化图表
                initChart();
                
                // 初始化表格
                initTable();
            });
            
            // 加载组件函数
            function loadComponents() {
                // 加载头部
                $('#header-container').load('components/header.html', function() {
                    layui.element.render();
                });
                
                // 加载侧边栏
                $('#sidebar-container').load('components/sidebar.html', function() {
                    layui.element.render();
                    // 设置当前页面激活状态
                    $('#nav-day-stats').addClass('layui-this');
                });
                
                // 加载底部
                $('#footer-container').load('components/footer.html');
            }
            
            // 初始化日期选择器
            function initDatePickers() {
                var now = new Date();
                var startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 7天前
                
                // 开始日期
                laydate.render({
                    elem: '#startDate',
                    type: 'date',
                    format: 'yyyy-MM-dd',
                    value: startDate,
                    done: function(value, date) {
                        // 更新结束日期的最小值
                        endDatePicker.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    }
                });
                
                // 结束日期
                var endDatePicker = laydate.render({
                    elem: '#endDate',
                    type: 'date',
                    format: 'yyyy-MM-dd',
                    value: now,
                    done: function(value, date) {
                        // 更新开始日期的最大值
                        startDatePicker.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    }
                });
                
                var startDatePicker = layui.laydate.get('#startDate');
            }
            
            // 初始化图表
            function initChart() {
                var dayChart = echarts.init(document.getElementById('dayChart'));
                
                // 按天统计图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '按天统计数据 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    legend: {
                        data: ['上传流量', '下载流量', '连接数'],
                        top: 30
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '流量(MB)',
                            position: 'left'
                        },
                        {
                            type: 'value',
                            name: '连接数',
                            position: 'right'
                        }
                    ],
                    series: [
                        {
                            name: '上传流量',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#5470c6'
                            }
                        },
                        {
                            name: '下载流量',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#91cc75'
                            }
                        },
                        {
                            name: '连接数',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#fac858'
                            }
                        }
                    ]
                };
                
                dayChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    dayChart.resize();
                });
            }
            
            // 初始化表格
            function initTable() {
                // 按天统计数据表格 - 需要连接真实数据接口
                table.render({
                    elem: '#dayTable',
                    data: [],
                    cols: [[
                        {field: 'date', title: '日期', width: 120, sort: true, fixed: 'left'},
                        {field: 'upload', title: '上传流量(MB)', width: 130, sort: true, templet: function(d) {
                            return '<span style="color: #5470c6;">' + d.upload + '</span>';
                        }},
                        {field: 'download', title: '下载流量(MB)', width: 130, sort: true, templet: function(d) {
                            return '<span style="color: #91cc75;">' + d.download + '</span>';
                        }},
                        {field: 'connections', title: '连接数', width: 100, sort: true, templet: function(d) {
                            return '<span style="color: #fac858;">' + d.connections + '</span>';
                        }},
                        {field: 'avgDelay', title: '平均延迟(ms)', width: 130, sort: true},
                        {field: 'totalTime', title: '总时长(秒)', width: 120, sort: true, templet: function(d) {
                            return formatTime(d.totalTime);
                        }},
                        {title: '操作', width: 120, fixed: 'right', toolbar: '#dayBar'}
                    ]],
                    page: true,
                    limit: 15,
                    limits: [15, 30, 50],
                    height: 'full-400',
                    done: function(res, curr, count) {
                        console.log('表格渲染完成', res, curr, count);
                    }
                });
                
                // 监听工具条事件
                table.on('tool(dayTable)', function(obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    
                    if (layEvent === 'detail') {
                        // 查看详情
                        layer.open({
                            type: 1,
                            title: '详细信息 - ' + data.date,
                            area: ['600px', '400px'],
                            content: '<div style="padding: 20px;">' +
                                '<table class="layui-table">' +
                                '<tr><td>日期</td><td>' + data.date + '</td></tr>' +
                                '<tr><td>上传流量</td><td>' + data.upload + ' MB</td></tr>' +
                                '<tr><td>下载流量</td><td>' + data.download + ' MB</td></tr>' +
                                '<tr><td>连接数</td><td>' + data.connections + '</td></tr>' +
                                '<tr><td>平均延迟</td><td>' + data.avgDelay + ' ms</td></tr>' +
                                '<tr><td>总时长</td><td>' + formatTime(data.totalTime) + '</td></tr>' +
                                '</table>' +
                                '</div>'
                        });
                    }
                });
            }
            
            // 格式化时间
            function formatTime(seconds) {
                if (seconds < 60) {
                    return seconds + '秒';
                } else if (seconds < 3600) {
                    var minutes = Math.floor(seconds / 60);
                    var remainingSeconds = seconds % 60;
                    return minutes + '分' + remainingSeconds + '秒';
                } else {
                    var hours = Math.floor(seconds / 3600);
                    var remainingMinutes = Math.floor((seconds % 3600) / 60);
                    return hours + '小时' + remainingMinutes + '分';
                }
            }
            
            // 监听表单提交
            form.on('submit(queryDay)', function(data) {
                var formData = data.field;
                console.log('查询条件：', formData);
                
                // 这里可以添加实际的查询逻辑
                layer.msg('正在查询数据...');
                
                // 模拟查询完成
                setTimeout(function() {
                    layer.msg('查询完成');
                    // 重新加载图表和表格数据
                    initChart();
                    initTable();
                }, 1000);
                
                return false;
            });
            
            // 监听维度选择变化
            form.on('select(dimension)', function(data) {
                console.log('选择的维度：', data.value);
                // 这里可以根据选择的维度更新图表显示
            });
        });
        
        // 工具条模板
        layui.define(function(exports) {
            var tpl = '<script type="text/html" id="dayBar">' +
                     '<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>' +
                     '</' + 'script>';
            document.write(tpl);
            exports('dayBar', {});
        });
    </script>
</body>
</html>